<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Design Mastery | FITNESXIA</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header>
      <nav>
        <div class="nav_header">
          <div class="nav_logo">
            <a href="#">
              <img src="" alt="logo" />
            </a>
          </div>
          <div class="nav_menu_btn" id="menu-btn">
            <i class="ri-menu-line"></i>
          </div>
        </div>
        <ul class="nav_links" id="nav-links">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#program">Programs</a></li>
          <li><a href="#testimonial">Testimonial</a></li>
          <li>
            <button class="btn">Sign Up</button>
          </li>
        </ul>
      </nav>

      <div class="section__container header__container" id="home">
        <div class="header__image">
          <img
            src="https://images.pexels.com/photos/1431283/pexels-photo-1431283.jpeg"
            alt="header"
          />
        </div>
        <div class="header__content">
          <h1>GET HEALTHY BODY WIH PERFECT EXERCISES</h1>
          <p class="section__description">
            Achieve your dream body with expertly designed exercises tailored
            for strength, endurange , and eoverall well-being.Whether you're
            beginner or a fitness enthusiast,our workouts are crafted to help yo
            stay active, build muscle , and imporove flexibility.
          </p>
          <div class="header__btn">
            <button class="btn">Get Started</button>
          </div>
          <div class="header__stats">
            <div>
              <h4>105+</h4>
              <p>Expert Trainers</p>
            </div>
            <div>
              <h4>970+</h4>
              <p>Member Joined</p>
            </div>
            <div>
              <h4>135+</h4>
              <p>Fitness Programs</p>
            </div>
          </div>
        </div>
      </div>
    </header>

    <section class="about" id="about">
      <div class="section__container about__container">
        <div class="about__image">
          <img
            src="https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg"
            alt="about"
          />
        </div>
        <div class="about__content">
          <h2 class="section__header">Get Ready to Reach Your Fitness Goals</h2>
          <p class="section__description">
            At FIENESXIA, we are committed to helping you achieve your fitness
            goals with expert gidance, personalized workouts, and a motivating
            environment. Whether you aim to build strength, improve endurance,
            or stay active, we provide the right support and training to keep
            you on track.
          </p>
          <p class="section__description">
            Start your journey today and transform your health with theperfect
            exercise routine!
          </p>
          <div class="about__btn">
            <button class="btn">Free Trial Today</button>
          </div>
        </div>
      </div>
    </section>

    <section class="program" id="program">
      <div class="section__container program_container">
        <div class="program__header">
          <h2 class="section__header">The Best Program We Offer For You</h2>
          <p class="section__description">
            For strength training and yoga to cardio and weight loss programs,we
            offer a variety of workouts to keep you motivated and on
            track.Joinus and find the prefect program for you.
          </p>
        </div>
        <div class="program__grid">
          <div class="program__card">
            <img
              src="https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg"
              alt="program"
            />
            <h4>Strength Traning</h4>
            <p>
              Build muscle, increase endurande, and enhance overall strength
              with our expert-led resistance and weight training sessions.
            </p>
            <a href="#">
              Learn More
              <span>
                <i class="ri-arrow-right-line"></i>
              </span>
            </a>
          </div>
          <div class="program__card">
            <img
              src="https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg"
              alt="program"
            />
            <h4>Basic Yoga</h4>
            <p>
              Imporove flexibility, balance, and mental well-being with guided
              yoga sessions designed for relaxation and inner peace.
            </p>
            <a href="#">
              Learn More
              <span>
                <i class="ri-arrow-right-line"></i>
              </span>
            </a>
          </div>
          <div class="program__card">
            <img
              src="https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg"
              alt="program"
            />
            <h4>Body Building</h4>
            <p>
              Sculpt and define your physique with targeted workouts, expert
              coaching, and personalized training plans.
            </p>
            <a href="#">
              Learn More
              <span>
                <i class="ri-arrow-right-line"></i>
              </span>
            </a>
          </div>
          <div class="program__card">
            <img
              src="https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg"
              alt="program"
            />
            <h4>Weight Loss</h4>
            <p>
              Burn calories, boost metabolism, and achieve your ideal weight
              with your effective fat-burning and cardio-based programs.
            </p>
            <a href="#">
              Learn More
              <span>
                <i class="ri-arrow-right-line"></i>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <section class="service">
      <div class="section__container service__container">
        <div class="service__content">
          <h2 class="section__header">
            Why Should People Choose Fitnesxia Services
          </h2>
          <ul class="service__list">
            <li>
              <h4>
                <span>
                  <i class="ri-checkbox-circle-fill"></i>Personal Tranining
                </span>
                <p class="section__description">
                  Get customized workout plans tailored to your fitness goals
                  one-on-one guidance from our professional trainers.
                </p>
              </h4>
            </li>
            <li>
              <h4>
                <span>
                  <i class="ri-checkbox-circle-fill"></i>Expert Trainer
                </span>
                <p class="section__description">
                  Train with highly qualified and experienced fitness experts
                  who will motivate and support yo every step of the way.
                </p>
              </h4>
            </li>
            <li>
              <h4>
                <span>
                  <i class="ri-checkbox-circle-fill"></i>Flexible Timing
                </span>
                <p class="section__description">
                  Enjoy the convenience of workout sessions that fit your
                  schedule making it easier to stay committed to your fitness
                  journey.
                </p>
              </h4>
            </li>
          </ul>
          <div class="service_btn">
            <button class="btn">Join Today</button>
          </div>
        </div>
        <div class="service__image">
          <img
            src="https://images.pexels.com/photos/3757943/pexels-photo-3757943.jpeg"
            alt="service"
          />
        </div>
      </div>
    </section>

    <section class="testimonial" id="testimonial">
      <div class="section__container testimonial__container">
        <div class="testimonial__content">
          <h2 class="section__header">What Our Happy Clients Say About Us</h2>
          <p class="section__description">
            Hear Fron our satisfied members who have transformed their fitness
            journey with FITNESXIA! Their success stories and experiences
            showcase the effectiveness of our programs, expert guidance, and
            supportive environment.
          </p>
        </div>
      </div>
      <div class="testimonal__swiper">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="testimonial__card">
                <div class="user__details">
                  <img
                    src="https://images.pexels.com/photos/7862484/pexels-photo-7862484.jpeg"
                    alt="user"
                  />
                  <div>
                    <h4>Alex Carter</h4>
                    <h5>Software Engineer</h5>
                  </div>
                </div>
                <div class="user__ratings">
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                </div>
                <p class="section__description">
                  FITNESXIA has completely changed my approach to fitness.The
                  personal training sessions are amazing, and I've see
                </p>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="testimonial__card">
                <div class="user__details">
                  <img
                    src="https://images.pexels.com/photos/7862484/pexels-photo-7862484.jpeg"
                    alt="user"
                  />
                  <div>
                    <h4>Sophia Martiez</h4>
                    <h5>Yoga Instructor</h5>
                  </div>
                </div>
                <div class="user__ratings">
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                </div>
                <p class="section__description">
                  The Basice Yoga program at FITNESXIA is exactly what I needed!
                  The trainers are knowedgeable, and the sessions have greatly
                  improved my flexiblity and mental well-being.
                </p>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="testimonial__card">
                <div class="user__details">
                  <img
                    src="https://images.pexels.com/photos/7862484/pexels-photo-7862484.jpeg"
                    alt="user"
                  />
                  <div>
                    <h4>Daniel Roberts</h4>
                    <h5>Business Analyst</h5>
                  </div>
                </div>
                <div class="user__ratings">
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                  <span>
                    <i class="ri-star-fill"></i>
                  </span>
                </div>
                <p class="section__description">
                  I joined FITNESXIA for bodybuilding, and I could't be happier
                  with he results. The expert trainers provide the best guide,
                  and the workout environment is super motivating!
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer>
      <div class="section__container footer__container">
        <div class="footer__col">
          <h4>Company</h4>
          <ul class="footer__links">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Why Us</a></li>
            <li><a href="#">Security</a></li>
            <li><a href="#">Partnership</a></li>
          </ul>
        </div>
        <div class="footer__col">
          <h4>Categories</h4>
          <ul class="footer__links">
            <li><a href="#">Bascie Yoga</a></li>
            <li><a href="#">Strength Training</a></li>
            <li><a href="#">Body Building</a></li>
            <li><a href="#">Weight Loss</a></li>
          </ul>
        </div>
        <div class="footer__col">
          <h4>Contact Us</h4>
          <ul class="footer__links">
            <li>
              <a href="#">
                <span><i class="ri-phone-fill"></i></span>+91 0987654321
              </a>
            </li>
            <li>
              <a href="#">
                <span><i class="ri-mail-fill"></i></span>info@qq.com
              </a>
            </li>
            <li>
              <a href="#">
                <span><i class="ri-map-pin-fill"></i></span>中国上海市闵行区
              </a>
            </li>
          </ul>
        </div>
        <div class="footer__col">
          <h4>Subscribe Our Newsletter</h4>
          <form action="/">
            <input type="text" placeholder="Enter your email" />
            <button class="btn"><i class="ri-send-plane-fill"></i></button>
          </form>
          <p>Never miss an update & news to your email</p>
        </div>
      </div>
      <div class="section__container footer__bar">
        <a href="#" class="footer__logo">
          <img src="" alt="logo" />
        </a>
        <p>Copyright © 2025 Web Design Mastery. All rights reserved.</p>
        <ul class="footer__socials">
          <li>
            <a href="#"><i class="ri-facebook-fill"></i></a>
          </li>
          <li>
            <a href="#"><i class="ri-twitter-fill"></i></a>
          </li>
          <li>
            <a href="#"><i class="ri-instagram-fill"></i></a>
          </li>
          <li>
            <a href="#"><i class="ri-linkedin-fill"></i></a>
          </li>
        </ul>
      </div>
    </footer>

    <script src="https://unpkg.com/scrollreveal"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>
